<template>
  <div class="preview-container">
    <!-- word查看详情 -->
    <el-dialog title="图片预览"
               :visible.sync="dialogVisible"
               width="60%"
               :before-close="handleClose">
      <el-row :gutter="20"
              class="container-box">
        <el-image style="width: 100%; height: 100%;"
                  :src="url">
        </el-image>
        <div class="bottom-box">
          <el-button @click="onCancel">取 消</el-button>
        </div>
      </el-row>
    </el-dialog>
  </div>
</template>

<script>
export default {
  props: {
    url: {
      type: String,
      default: () => {
        return ''
      }
    },
    viewDialog: {
      type: Boolean,
      default: () => {
        return false
      }
    }
  },
  data () {
    return {
      excelData: [],
      workbook: {},
      excelURL: "", //文件地址，看你对应怎末获取、赋值

      dialogVisible: false,
      vHtml: "",
      wordURL: ''  //文件地址，看你对应怎末获取、赋值
    }
  },
  methods: {
    handleClose (done) {
      this.onCancel();//重置
      done();
    },
    onCancel () {//取消
      this.$emit('update:url', '');
      this.$emit('update:viewDialog', false);
      this.dialogVisible = false;
    },

    initFunc () {//初始函数     
      this.dialogVisible = this.viewDialog;
    }
  },
  watch: {
    viewDialog (n, o) {
      if (n == true) {
        this.initFunc();//初始函数
      };
      console.log('w viewDialog=', this.viewDialog)
    }
  },
  created () {
    console.log('c viewDialog=', this.viewDialog)
    this.initFunc();//初始函数
  }
}
</script>

<style lang="scss" scoped>
.preview-container {
  width: 100%;
  #wordView {
    width: 100%;
    height: 500px;
    overflow: auto;
  }
  .bottom-box {
    text-align: right;
    margin-top: 20px;
  }
}
.container-box {
  padding: 0px 15px !important;
}
#table {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #2c3e50;
  margin-top: 60px;
  border: 1px solid #ebebeb;
  padding: 20px;
  width: 100%;
  margin: 20px auto;
  // border-shadow: 0 0 8px 0 rgba(232, 237, 250, 0.6),
  //   0 2px 4px 0 rgba(232, 237, 250, 0.5);
  border-radius: 10px;
  // overflow: scroll;
  height: 100%;
  .tab {
    margin: 0 0 20px 0;
    display: flex;
    flex-direction: row;
  }
}
</style>